﻿@{
    ViewBag.Title = "Register";
    Layout = "~/Views/Shared/_LayoutPublic.cshtml";
}
<link href="../../Styles/UserStyle.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.ui.datepicker.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
  <script type="text/javascript">
      $(document).ready(function () {
          $('#birthday').datepicker({ dateFormat: "dd/mm/yy", changeMonth: true, changeYear: true, yearRange: "1920:2010" });

          jQuery.validator.addMethod("phoneVN", function (phone_number, element) {
              phone_number = phone_number.replace(/\s+/g, "");
              return this.optional(element) || phone_number.length >= 10 && phone_number.length <= 11 &&
		phone_number.match(/^(0\d{9,10})/);
          }, "Please specify a valid phone number");

          $('#frm-register').validate({
              rules: {
                  email: { required: true, email: true, remote: '/user/checkemail' },
                  pwd: { required: true, minlength: 6 },
                  rpwd: { equalTo: '#pwd' },
                  name: { required: true },
                  birthday: { required: true },
                  phone: { phoneVN: true },
                  capcha_input: { required: true }
              },
              messages: {
                  email: { required: 'Vui lòng nhập địa chỉ Email', email: 'Email không đúng, vui lòng nhập lại! VD: musicflows.ct@gmail.com', remote: jQuery.format('{0} đã được sử dụng. Vui lòng nhập lại') },
                  pwd: { required: 'Vui lòng nhập mật khẩu', minlength: 'Mật khẩu có tối thiểu là {0} ký tự' },
                  rpwd: { equalTo: 'Xác nhận mật khẩu không đúng' },
                  name: { required: 'Vui lòng nhập họ và tên' },
                  birthday: { required: 'Vui lòng nhập ngày, tháng, năm sinh' },
                  phone: { phoneVN: 'Số điện thoại không đúng, vui lòng nhập lại! VD: 0903639390 hoặc 01669777768' },
                  capcha_input: { required: 'Vui lòng nhập mã xác nhận' }
              }
          });
      });
    </script>
<h2 style="text-align:center; color:#990000; padding:10px;">Đăng Ký Tài Khoản</h2>
<form id="frm-register" action="/user/confirmregister" method="post">
    <div id="frmcontent">
        <h4 class="title">Thông tin tài khoản</h4>
        <ul class="wrap-ul-content">
        <li>Email*</li>
        <li><input type="text" id="email" name="email"  /></li>
        <li>Mật khẩu*</li>
        <li><input type="password" id="pwd" name="pwd"  /></li>
        <li>Xác nhận mật khẩu*</li>
        <li><input type="password" name="rpwd" id="rpwd" /></li>
    </ul>
        <h4 class="title">Thông tin cá nhân</h4>
        <ul class="wrap-ul-content">
        <li>Họ và Tên*</li>
        <li><input type="text" name="name" id="name"  /></li>        
        <li>Ngày, tháng, năm sinh*</li>
        <li><input type="text" id="birthday" name="birthday" /></li> 
        <li>Số điện thoại</li>
        <li><input type="text" name="phone" id="phone"  /></li>
    </ul>
        <h4 class="title">Mã xác nhận</h4>
        <ul class="wrap-ul-content capcha" >
            <li>
                Nhập mã xác nhận: <input type="text" name="capcha_input" id="capcha_input"  />
                <img src="@ViewBag.capcha" id="img_capcha" alt="Mã xác nhận" />                              
            </li>                        
        </ul>
    </div>
    <div id="button-frm">
        <ul>
            <li><input type="submit" value="Đăng Ký" class="button"  /></li>
            <li><input type="reset" value="Nhập Lại" class="button" /></li>
        </ul>
    </div>    
</form>

